/* 页面容器 */
.container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 设置容器高度为视口高度 */
    background-color: #f5f5f5;
  }
  
  /* 搜索栏样式 */
  .search-bar {
    padding: 15px;
    background-color: #fff;
    height: 60px;
    width: 100%;
  
    .search-input {
      background-color: #f2f2f2;
      border-radius: 20px;
      padding: 10px 15px;
      font-size: 14px;
    }
  
    .placeholder-style {
      color: #999;
    }
  }
  
  /* 内容区域 */
  .content-area {
    flex: 1; /* 占据剩余空间 */
    display: flex;
    width: 80%;
    margin: 0 auto; /* 居中对齐 */
    box-sizing: border-box;
  
    /* 左边列 */
    .left-column {
      width: 40%; /* 占据 40% 宽度 */
      margin-right: 10px;
  
      .small-box {
        height: 170px;
        width:100%;
        background-color: #ff9a9e;
        border-radius: 8px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
      }
  
      .large-box {
        height: calc(100% - 130px);
        background-color: #a18cd1;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
      }
    }
  
    /* 右边列 */
    .right-column {
      flex: 1; 
      margin-right: 10px;
  
      .top-box {
        height: 170px;
        background-color: #fbc2eb;
        border-radius: 8px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
      }
  
      .bottom-boxes {
        display: flex;
        flex-direction: column;
        height: calc(100% - 130px);
  
        .bottom-box {
          flex: 1;
          background-color: #84fab0;
          border-radius: 8px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: bold;
  
          &:last-child {
            background-color: #8fd3f4;
            margin-bottom: 0;
          }
        }
      }
    }
  }
  
  /* 底部导航栏 */
  .tab-bar {
    position: fixed; /* 固定定位 */
    bottom: 0; /* 距离底部为 0 */
    left: 0; /* 距离左侧为 0 */
    width: 100%; /* 宽度占满整个页面 */
    height: 50px; /* 高度固定为 50px */
    background-color: #fff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around; /* 子项均匀分布 */
    align-items: center; /* 垂直居中对齐 */
    z-index: 1000; /* 确保在其他内容之上 */
  }
  
  .tab-bar .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
  
    &.active {
      color: #1aad19;
    }
  
    image {
      width: 24px;
      height: 24px;
      margin-bottom: 4px;
    }
  }